<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>智慧教育系统</title>
    <meta content="" name="descriptison">
    <meta content="" name="keywords">


    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="static/assets/js/echarts.min.js"></script>
    <script src='static/assets/js/ecStat.min.js'></script>


    <!-- Favicons -->
    <link href="static/assets/img/在线教育.svg" rel="icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900"
          rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="static/assets/css/style.css" rel="stylesheet">

    <!-- =======================================================
    * Template Name: Mamba - v2.0.1
    * Template URL: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/
    * Author: BootstrapMade.com
    * License: https://bootstrapmade.com/license/
    ======================================================== -->
</head>

<body>
<!-- ======= Header ======= -->
<script src="static/assets/vendor/jquery/jquery.min.js"></script>
<script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="static/assets/vendor/php-email-form/validate.js"></script>
<script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="static/assets/vendor/venobox/venobox.min.js"></script>
<script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="static/assets/vendor/counterup/counterup.min.js"></script>
<script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="static/assets/vendor/aos/aos.js"></script>
<!--<script src="../static/assets/js/vue-2.4.0.js"></script>-->

<header id="header">
    <div class="container">

        <div class="logo float-left">
            <h1 class="text-light"><a href="index.html"><span>MOOC</span></a></h1>
            <!-- Uncomment below if you prefer to use an image logo -->
            <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
        </div>

        <nav class="nav-menu float-right d-none d-lg-block">
            <ul>
                <li><a href="/study" style="font-size: 24px">学习园地</a></li>
                <li><a href="/login?user=张程智&password=123456" style="font-size: 24px">学情分析</a></li>
                <li><a href="/recommend" style="font-size: 24px">习题推荐</a></li>
            </ul>
        </nav><!-- .nav-menu -->

    </div>

    <div id="user">
        <span style="position: relative; top: 13px; right: -1158px;" value="1">{{local_user}} <a
                onclick="window.location.href='/'">登出</a></span>
    </div>
</header><!-- End Header -->

<!-- ======= Our Team Section ======= -->
<section id="team" class="team font-color">


    <div class="container">


        <div class="section-title" style="height:100px;position:relative; left: 0px; top: -8px; ">
            <h2 style="position: absolute; left: 500px; top: 30px;">习题推荐</h2>
            <!--            <div style="position: absolute; left: 3px; top: 30px;">haha</div>-->
        </div>


        <section class="counts section-bg" id="fill_exercise_section">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="exercise_detail"
                 style="margin-bottom: 15px; height:560px;position:relative; left: 0px; top: 0px; ">
                <span class="title_3" style="position:absolute; left: 0px; top: 9px; font-size: 22px">学生学习状态感知的习题推荐 </span>
                <div class="line" style="position:absolute; left: 0px; top: 40px;"></div>
                <p style="position: absolute; left: 34px; top: 90px;font-size: 20px" id="exercise_content">
                    根据你的答题和学习情况，为你推荐下列习题：</p>

                <div id="table" style="position: absolute; left: 73px; top: 90px;width: 80%;">
                    <table id="table-1"
                           style="position: absolute; left: 34px; top: 40px; width: 100%; margin: 10px auto;font-size: 18px">
                        <tr>
                            <th>习题ID</th>
                            <th>习题名称</th>
                            <th>题型</th>
                            <th>知识点</th>
                            <th>难度系数</th>
                        </tr>
                        <tr style="height: 40px;">
                            <td style=" font-size: 18px">1001</td>
                            <td>认识python</td>
                            <td>选择题</td>
                            <td>python基础</td>
                            <td>0.78</td>
                        </tr>

                        <tr style="height: 40px">
                            <td>1563</td>
                            <td>python表达式</td>
                            <td>填空题</td>
                            <td>语法与表达式</td>
                            <td>0.53</td>
                        </tr>

                        <tr style="height: 40px">
                            <td>1221</td>
                            <td>文件的创建操作</td>
                            <td>填空题</td>
                            <td>文件的常用操作</td>
                            <td>0.63</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1433</td>
                            <td>代码异常抛出</td>
                            <td>填空题</td>
                            <td>异常</td>
                            <td>0.71</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1296</td>
                            <td>类中定义特殊方法</td>
                            <td>选择题</td>
                            <td>类与对象</td>
                            <td>0.59</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1140</td>
                            <td>自定义函数的创建</td>
                            <td>选择题</td>
                            <td>函数</td>
                            <td>0.64</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1377</td>
                            <td>形式参数与实际参数</td>
                            <td>选择题</td>
                            <td>函数</td>
                            <td>0.58</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1209</td>
                            <td>函数语法找错</td>
                            <td>选择题</td>
                            <td>函数</td>
                            <td>0.23</td>
                        </tr>
                        <tr style="height: 40px">
                            <td>1836</td>
                            <td>函数的调用</td>
                            <td>填空题</td>
                            <td>函数</td>
                            <td>0.7</td>
                        </tr>


                    </table>

                </div>

            </div>

        </section>


        <!-- ======= Footer ======= -->
        <footer id="footer">
            <div class="container">
                <div class="copyright">
                    &copy; Copyright <strong><span>Jiangsu Normal University</span></strong>. All Rights Reserved
                </div>
                <div class="credits">
                    <!-- All the links in the footer should remain intact. -->
                    <!-- You can delete the links only if you purchased the pro version. -->
                    <!-- Licensing information: https://bootstrapmade.com/license/ -->
                    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/ -->
                    Designed by <a href="http://eit.jsnu.edu.cn/_t1745/main.htm" target="_blank">School of Computer
                    Science and
                    Technology</a>
                </div>
            </div>
        </footer><!-- End Footer -->

        <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

        <!-- Vendor JS Files -->
        <script src="static/assets/vendor/jquery/jquery.min.js"></script>
        <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
        <script src="static/assets/vendor/php-email-form/validate.js"></script>
        <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
        <script src="static/assets/vendor/venobox/venobox.min.js"></script>
        <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
        <script src="static/assets/vendor/counterup/counterup.min.js"></script>
        <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
        <script src="static/assets/vendor/aos/aos.js"></script>

        <!-- Template Main JS File -->
        <script src="static/assets/js/main.js"></script>

        <script type="text/javascript">
            window.onload = function () {
                // 初始化页面
                // 1.隐藏填空题
                // 2.初始化选择题list
                // 3.初始化填空题list


                var checkboxswitch = document.getElementById('checkboxswitch');
                checkboxOnclick(checkboxswitch);
                $.ajax({
                    type: 'GET',
                    url: '/testGet',
                    dataType: 'json',
                    data: {'id': "1001"},
                    success: function (res) {
                        //设置题目id
                        $("#exercise_id").text(res['id'])
                        // 设置题目内容
                        $("#exercise_content").text(res['content'])
                        // 设置对象
                        $("#object").text(res['object'])
                        // 设置计量单位
                        $("#measure").text(res['measure'])
                    },
                    error: function () {
                        console.log('error')
                    }
                })

                $.ajax({
                    type: 'GET',
                    url: '/SelectGet',
                    dataType: 'json',
                    data: {'id': "1"},
                    success: function (res) {
                        //设置题目id
                        $("#select_exercise_id").text(res['id'])
                        // 设置题目内容
                        content = res['content'].replace('\\n', '<br><br>')
                        $("#select_exercise_content").innerHTML = content;
                    },
                    error: function () {
                        console.log('error')
                    }
                })
                // 初始化页面


                var pen = document.getElementById("pen");//计算纸图标
                var btn_sketch_paper = document.getElementById("sketch_paper");//计算纸按钮

                src1 = "../static/assets/img/笔记-白.svg";
                src2 = "../static/assets/img/计算纸.svg";
                // 鼠标悬停切换白色图标
                btn_sketch_paper.onmouseover = function () {
                    pen.src = src1;
                }
                //鼠标移出切换蓝色图标
                btn_sketch_paper.onmouseout = function () {
                    pen.src = src2;
                }


                //设置时间格式
                Date.prototype.Format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1, //月份
                        "d+": this.getDate(), //日
                        "H+": this.getHours(), //小时
                        "m+": this.getMinutes(), //分
                        "s+": this.getSeconds(), //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }

                var submit_answer_btn = document.getElementById("submit_answer_btn");//提交答案按钮
                // 点击提交答案按钮弹框显示提交结果
                submit_answer_btn.onclick = function () {
                    var id = document.getElementById("exercise_id").innerText;
                    var user_answer_input = document.getElementById("user_answer").value;
                    // console.log(user_answer_input)
                    var time = new Date().Format("yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        type: 'POST',
                        url: '/checkAnswer',
                        dataType: 'json',
                        data: {
                            'id': id,
                            'user_answer': user_answer_input,
                            'end_time': time,
                        },
                        success: function (res) {
                            alert(res['status'])//弹框
                        },
                        error: function () {
                            // console.log('error')
                        }
                    })
                }

                // 选择题点击提交答案
                var submit_select_answer_btn = document.getElementById("submit_select_answer_btn");//提交答案按钮
                submit_select_answer_btn.onclick = function () {
                    var id = document.getElementById("select_exercise_id").innerText;
                    var user_answer_input = document.getElementById("select_user_answer").value;
                    // console.log(user_answer_input)
                    var time = new Date().Format("yyyy-MM-dd HH:mm:ss");
                    $.ajax({
                        type: 'POST',
                        url: '/checkSelectAnswer',
                        dataType: 'json',
                        data: {
                            'id': id,
                            'user_answer': user_answer_input,
                            'end_time': time,
                        },
                        success: function (res) {
                            alert(res['status'])//弹框
                        },
                        error: function () {
                            // console.log('error')
                        }
                    })
                }

                //jquery实现点击提示按钮弹框显示提示信息
                $('#hint_btn').on("click", function () {
                    alert("这是提示！！！");
                })

                //监听加入目标事件
                $('#add_to_goal').on("click", function () {
                    if (confirm("您确定要将此题加入目标吗？")) {
                        alert("已加入");
                    } else {
                        alert("已取消");
                    }

                })
                //监听前往学习计划事件
                $('#go_plan').on("click", function () {
                    var name = prompt("你的名字是：");
                    alert("你好" + name);
                })

                //检测exercise_id变化

            }
        </script>

        <script type="text/javascript">
            // ajax请求
            function getTest(id) {
                $.ajax({
                    type: 'GET',
                    url: '/testGet',
                    dataType: 'json',
                    data: {'id': id},
                    success: function (res) {
                        //设置题目id
                        $("#exercise_id").text(res['id'])
                        // 设置题目内容
                        $("#exercise_content").text(res['content'])
                        // 设置对象
                        $("#object").text(res['object'])
                        // 设置计量单位
                        $("#measure").text(res['measure'])
                    },
                    error: function () {
                        console.log('error')
                    }
                })
            }
        </script>

        <script type="text/javascript">
            // ajax请求
            function getSelectList(id) {
                $.ajax({
                    type: 'GET',
                    url: '/SelectGet',
                    dataType: 'json',
                    data: {'id': id},
                    success: function (res) {
                        //设置题目id
                        $("#select_exercise_id").text(res['id']);
                        // 设置题目内容
                        //一些特殊字符替换成html的内容
                        content = res['content'].replaceAll('\\n', '<br><br>');
                        content = content.replaceAll('\\t', '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                        console.log(content)
                        var select_content = document.getElementById('select_content');
                        // select_content.style.whiteSpace = 'pre'; // html保留文本原格式，如换行、空格
                        select_content.innerHTML = content;//识别html文本内容
                    },
                    error: function () {
                        console.log('error')
                    }
                })
            }
        </script>

        <script type="text/javascript">
            var fill_exercise_section = document.getElementById('fill_exercise_section');
            var fill_exercise_list = document.getElementById('fill_exercise_list');
            var select_exercise_section = document.getElementById('select_exercise_section');
            var select_exercise_list = document.getElementById('select_exercise_list');
            var exercise_type = document.getElementById('exercise_type');

            /*点击滑动按钮切换练习模式（选择题vs填空题）*/
            function checkboxOnclick(checkbox) {
                if (checkbox.checked == true) {
                    fill_exercise_section.style.display = "none";
                    fill_exercise_list.style.display = "none";
                    select_exercise_section.style.display = "block";
                    select_exercise_list.style.display = "block";
                    exercise_type.innerHTML = "&nbsp;&nbsp;选择题"
                } else {
                    fill_exercise_section.style.display = "block";
                    fill_exercise_list.style.display = "block";
                    select_exercise_section.style.display = "none";
                    select_exercise_list.style.display = "none";
                    exercise_type.innerHTML = "&nbsp;&nbsp;填空题"
                }
            }
        </script>

</body>

</html>